<template>
  <div ref="mapDiv"></div>
</template>

<script setup lang="ts">
// @ts-nocheck
import type { Response } from 'open-data-v/base'
import type GaodeMapComponent from '../config'
import type { GaodeMap } from '../type'
import { useEchart } from '../../../hooks'
import { onMounted, ref } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'

const mapDiv = ref<HTMLElement>()
const initMap = () => {
  AMapLoader.load({
    key: '83fba62064179236cf5168ae9cd3c394', // 替换为你的高德地图 API Key
    version: '2.0', // 地图版本号，可选，默认为1.0
    plugins: ['AMap.Scale', 'AMap.Geocoder'] // 需要使用的插件列表，可选
  })
    .then((AMap) => {
      const map = new AMap.Map(mapDiv.value, {
        viewMode: '2D',
        zoom: 12,
        center: [114.5120205423622, 38.04291764925318],
        resizeEnable: true, // 监控地图容器尺寸变化，默认值为false
        expandZoomRange: true,
      })
    })
    .catch((e) => {
      console.error('加载高德地图出错：', e)
    })
}

onMounted(() => {
  initMap()
})
</script>
